Namespace("sketch.framework");

(function(fwk) {
    fwk.TextBuffer = klass(fwk.UIElement, {
        _constructor: function(box, labelProperty, fontProperty, alignProperty) {
            this._drawBuffer = new fwk.DrawBuffer();
            this.labelProperty = labelProperty;
            this.fontProperty = fontProperty;
            this.textAlignProperty = alignProperty;
            this.bindToBox(box);
        },

        offset: function(value) {
            if (arguments.length === 1) {
                this._offset = value;
            }
            return this._offset;
        },

        drawSelf: function(context) {
            var offset = this._offset || {x:0, y:0};
            var x = this.left(),
                    y = this.top(),
                    w = this.width(),
                    h = this.height();

            this._drawBuffer.width(w); //TODO: refactor need to check width before set because very expensive
            this._drawBuffer.height(h);
            this._drawBuffer.clear();

            var innerContext = this._drawBuffer.context;
            innerContext.save();
            innerContext.textBaseline = "middle";
            innerContext.textAlign = this.textAlignProperty.value;
            innerContext.font = this.fontProperty.value.cssString();
            innerContext.fillStyle = this.fontProperty.value.get("color");

            if (this.textAlignProperty.value == 'center') {
                innerContext.fillText(this.labelProperty.value, w / 2  + offset.x, h / 2 + offset.y);
            }
            else if (this.textAlignProperty.value == 'left') {
                innerContext.fillText(this.labelProperty.value, offset.x, h / 2 + offset.y);
            }
            else if (this.textAlignProperty.value == 'right') {
                innerContext.fillText(this.labelProperty.value, w - offset.x, h / 2 + offset.y);
            }
            innerContext.restore();

            this._drawBuffer.draw(context, x, y);
        },

        /*update: function(text, font){
         var width = this.width(),
         height = this.height(),
         context = this._drawBuffer.context,
         lineHeight = font.lineHeight();

         this._drawBuffer.width(width);
         this._drawBuffer.height(height);
         this._drawBuffer.clear();

         context.save();
         context.textBaseline = "top";
         context.textAlign = "left";
         context.font = font.cssString();
         var spaceSize = context.measureText(" ").width;
         var tokens = txt.Tokenizer.tokenize(text);
         txt.TextMeasure.updateTokens(tokens, width, function(token){
         var size = context.measureText(token.value).width;
         var spaces = token.length - token.value.length;
         return {minWidth:size, width:(size+spaces*spaceSize)};
         });

         for (var i = 0, ll = tokens.length; i < ll; i++) {
         var tokensLine = tokens[i];
         for (var j = 0, tl = tokensLine.length; j < tl; j++) {
         var token = tokensLine[j];
         context.fillText(token.value, token.x, token.line * lineHeight);
         }
         }

         context.restore();
         },*/

        measure: function(context) {
            return context.measureText("Label");
        }
    });
})(sketch.framework);